<template>
    <view class="customBox">
        <u-row gutter="16">
            <u-col span="6" v-for="(item, index) in item" :key="index">
                <view @click="click(item)" class="customBox-item" :style="getBackgroundStyle(item.tag)">
                    <u-image width="300rpx" height="225rpx" :src="item.image" class="customBox-img"></u-image>
                    <text class="customBox-name">{{ item.goods_name }}</text>
                    <view style="padding-top: 10rpx;color: white">
                        value：{{ item.shop_price }}
                        <u-icon name="rmb-circle-fill" color="#2979ff" size="28" style="padding-left:10rpx"></u-icon>
                    </view>
                </view>
            </u-col>
        </u-row>
    </view>
</template>
<script>
export default {
    name: 'customBoxList',
    props: {
        item: {
            type: Array,
            default: () => [],
            required: true
        }
    },
    data() {
        return {}
    },
    methods: {
        // 计算背景图
        getBackgroundStyle(tag) {
            // 根据tag的值返回不同的背景图样式
            switch (tag) {
                case 'legend':
                    return "background: linear-gradient(167deg,#4C5070 32.38%,#AC772B 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);";
                case 'chuanqi':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#902133 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'supreme':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#5E1D73 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);';
                case 'rare':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#2C1D7E 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'normal':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#7E849C 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                default:
                    return '';
            }
        },
        // 点击商品
        click(item) {
            this.$u.route({
                url: 'pages/prizeRate/prizeRate',
                type: 'navigateTo',
                params: {
                    id: item.id,
                    goods_name: item.goods_name,
                    image: item.image,
                    coin_price: item.coin_price
                }
            })
        },
    }
}

</script>

<style scoped lang="scss">
.customBox {
    margin-top: 20rpx;
    padding: 20rpx;

    .customBox-item {
        //background-image: url("@/static/images/shop_bg.png");
        //background-image: url("@/static/logo.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        height: 350rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-radius: 20rpx;
        margin-bottom: 20rpx;

        .customBox-img {
            padding-top: 30rpx;
            margin: 0 auto;
        }

        .customBox-name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-top: 40rpx;
            color: #ffffff;
        }
    }
}

</style>